<template>
  <el-form ref="basicFormRef" :model="basicForm" :disabled="readOnly" :rules="basicRules" label-width="120px"
    class="base_details_form">
    <el-form-item label="礼包名称" prop="name">
      <el-input v-model="basicForm.name" placeholder="请输入" />
    </el-form-item>
    <el-form-item label="礼包价（元）" prop="price">
      <el-input-number v-model.number="basicForm.price" :min="0" :precision="2" :disabled="readOnly" :controls="false"
        controls-position="right" />
    </el-form-item>
    <el-form-item label="礼包封面" prop="mainPic">
      <UploadPicture v-model="basicForm.mainPic" :limit="1" :imgSize="$.describeImgSize()" :fileSize="$.imgFileSize()"
        :disabled="readOnly" />
    </el-form-item>
    <el-form-item label="首页推荐图片" prop="homePic">
      <UploadPicture v-model="basicForm.homePic" :limit="1" :imgSize="$.homePackageSize()" :fileSize="$.imgFileSize()"
        :disabled="readOnly" />
    </el-form-item>
    <el-form-item label="礼包简介" prop="descPicList">
      <UploadPicture v-model="basicForm.descPicList" :limit="50" :fileSize="$.imgFileSize()" :disabled="readOnly" />
    </el-form-item>
    <el-form-item label="礼包单位" prop="sellUnit">
      <el-radio-group v-model="basicForm.sellUnit">
        <el-radio v-for="(item, index) in unitOptions" :key="index" :label="item" />
      </el-radio-group>
      <el-input class="unit_input" v-model="otherUnit" placeholder="单位" />
    </el-form-item>
    <el-form-item label="失效时间" prop="validTime">
      <el-date-picker v-model="basicForm.validTime" type="date" value-format="YYYY-MM-DD" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import UploadPicture from "@com/upload/UploadPicture.vue";
import { ref, reactive, watch, defineProps, defineExpose } from "vue";
import $ from "@util/base"
import { $msg } from "@ui/msg"

const props = defineProps({
  readOnly: { type: Boolean, default: false },
  data: { type: Object },
})

watch(() => props.data, val => {
  setData(val)
})

function setData(val) {
  basicForm.name = val.name
  basicForm.price = val.price
  basicForm.mainPic = [val.mainPic]
  basicForm.homePic = [val.homePic]
  basicForm.descPicList = val.descPicList
  if (unitOptions.includes(val.sellUnit)) {
    basicForm.sellUnit = val.sellUnit
  } else {
    basicForm.sellUnit = "其他"
    otherUnit.value = val.sellUnit
  }
  basicForm.validTime = val.validTime
}

const otherUnit = ref()
const unitOptions = ['个', '份', '箱', '其他']

const basicFormRef = ref(null)

const basicForm = reactive({
  name: null,
  price: null,
  mainPic: [],
  homePic: [],
  descPicList: [],
  sellUnit: null,
  validTime: null,
})

const basicRules = {
  name: [{
    required: true,
    message: '请输入礼包名称',
    trigger: 'blur',
  }],
  price: [{
    required: true,
    message: '请输入礼包价（元）',
    trigger: 'blur',
  }, {
    type: "number",
    message: "请输入数字",
  }],
  mainPic: [{
    required: true,
    type: 'array',
    message: '请上传礼包封面',
    trigger: 'change',
  }],
  homePic: [{
    required: true,
    type: 'array',
    message: '请上传首页推荐图片',
    trigger: 'change',
  }],
  descPicList: [{
    required: true,
    type: 'array',
    message: '请上传礼包简介',
    trigger: 'change',
  }],
  sellUnit: [{
    required: true,
    message: '请选择礼包单位',
    trigger: 'change',
  }],
  validTime: [{
    required: true,
    message: '请选择失效时间',
    trigger: 'change',
  }],
}

function check() {
  return basicFormRef.value.validate((valid) => {
    if (valid && checkUnit()) {
      return true
    }
    return false
  })
}

function checkUnit() {
  if (basicForm.sellUnit == "其他" && $.isEmpty(otherUnit.value)) {
    $msg.error("请输入单位")
    return false
  }
  return true
}

function getUnit() {
  if (basicForm.sellUnit != "其他") {
    return basicForm.sellUnit
  } else {
    return otherUnit.value
  }
}

function getValue() {
  let data = $.deepCopy(basicForm)
  data.mainPic = data.mainPic[0]
  data.homePic = data.homePic[0]
  data.sellUnit = getUnit()
  return data
}

defineExpose({ check, getValue })
</script>

<style lang="scss" scoped>
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

::v-deep input[type='number'] {
  -moz-appearance: textfield !important;
}

.unit_input {
  width: 88px !important;
  margin-left: 8px !important;
}
</style>
